﻿<!DOCTYPE html>
<html>
<head>
    <title>查看相册</title>
    <meta charset="UTF-8">
    <link rel="icon" href="/assets/zw-ico.jpg">
    <div th:include="header::headPart"></div>
	<script th:inline="javascript">
		$(document).ready(function() {
			showInfo();			
			showDetail();
			setInterval(function(){
				checkTrafficEnv();
			}, 5000);
		});
		
		var issuper = [[${param.lol}]] != null || [[${issuper}]];
		function checkTrafficEnv() {
			if(isMobileAndNotWifi()) {
				$("#btnLoadBig").removeClass("btn-primary").addClass("btn-danger");
			} else {
				$("#btnLoadBig").removeClass("btn-danger").addClass("btn-primary");
			}
		}

		function showInfo() {
			var alert = [[${info}]];
			if(alert != null) {
				var div = $("<div></div>").attr("align", "center");
				div.addClass("alert alert-info");
				div.text(alert);
				$("#alert").append(div);
			}
			
			var alert = [[${error}]];
			if(alert != null) {
				var div = $("<div></div>").attr("align", "center");
				div.addClass("alert alert-danger");
				div.text(alert);
				$("#alert").append(div);
			}
		}
		
		function toLoadBig() {
			$(".dog").each(function() {
				var current = $(this);
				var status = current.attr("status");
				if(status != "full") {
					current.attr("alt", "<图片正在加载...>");
					var myPath = current.data("mypath");
			        loadImage(this, myPath, showImage);
			        current.attr("status", "full");
				}
			});
			$("#trLoadBig").hide();
		}
		
		function showDetail() {
			$("#major").css("table-layout", "fixed");
			
			if(issuper) {
				$("#backto").show();
			} else {
				$("#backto").hide();
			}
			
			var nonexist = [[${nonexist}]];
//			console.log([[${nonexist}]], [[${info}]]);
			if([[${info}]]) {
				$("#trAll").hide();
			}
			
			var imageItems = [[${images}]];
			var zhang = " 张";
			var countOfAll = [[${countOfAll}]];
			var sizeOfAll = [[${sizeOfAll}]];
	//		console.log(199, countOfAll, [[${nonexist}]]);
			if(countOfAll <= 0 || [[${nonexist}]]) {
				$("#trBigSmall").hide();
			}
			
			var countOfSmall = [[${countOfSmall}]];
			var sizeOfSmall = [[${sizeOfSmall}]];
			var smallFileSize = "小图 " + [[${smallFileSize}]] + " 大图";
			
			var countOfBig = [[${countOfBig}]];
			var sizeOfBig = [[${sizeOfBig}]];
			$("#btnLoadBig").click(toLoadBig);
			if(countOfBig <= 0) {
				$("#trLoadBig").hide();
				$("#sizeOfBig").hide();
			}
			
			var hasBig = countOfBig > 0;
			var albumName = [[${albumName}]];
			htmlTitle("相册" + albumName);
			
			$("#tdName").append("名称：").append(albumName).css("word-wrap", "break-word");
			$("#albumName").text(albumName);
			
			$("#countOfAll").text("总共 " + countOfAll + zhang).addClass("label label-default");
			$("#sizeOfAll").text(sizeOfAll).addClass("label label-success");
			$("#infoBigSmall").text(smallFileSize).addClass("label label-default");
			$("#myUpload").click(function(){
				var href = "/album/" + albumName + "/edit";
				window.location.href = href;
			});
			if(issuper) {
				$("#myRemove").removeClass("hide");
				$("#myRemove").click(function(){
					var href = "/album/" + albumName + "/sansa";
					window.location.href = href;
				});
			}

			$("#countOfSmall").text("小图 " + countOfSmall + zhang).addClass("label label-default");
			$("#sizeOfSmall").text(sizeOfSmall).addClass("label label-success");
			
			$("#countOfBig").text("大图 " + countOfBig + zhang).addClass("label label-danger");
			$("#sizeOfBig").text(sizeOfBig).addClass("label label-danger");
			
			checkTrafficEnv();
			
			if(imageItems == null) {
				return;
			}
			
			for(var index = 1; index <= imageItems.length; index++) {
				var item = imageItems[index - 1];
				var path = item.href;
				var imageName = item.name;
				var isSmallFile = item.isSmallFile;
				var ftype = item.ftype;
				var image;
				if(ftype == "image") {
					image = $("<img></img>").attr("alt", "<大图片文件，点击加载>");
					image.addClass("dog");
					image.attr("id", imageName);
					image.attr("data-mypath", path);
					image.css("max-width", "100%");
					image.click(function() {
						var current = $(this);
						current.attr("alt", "<图片正在加载...>");
						var myPath = current.data("mypath");
				        loadImage(this, myPath, showImage);
				        current.attr("status", "full");
					});
				} else if(ftype == "video") {
					image = $("<video></video>").attr("controls", "controls");
					image.attr("id", imageName);
					image.attr("src", path);
				} else {
					console.log("uncanny " + ftype);
					alert("fuck " + ftype);
					continue;
				}
				
				if(isSmallFile) {
					image.click();
				}
				
				var anchor = $("<a></a>").append(image);
				anchor.attr("id", "anchor_" + imageName);
				var td = $("<td></td>");
				td.css("word-wrap", "break-word");
				
				if(issuper) {
					var labelRemove = $("<label>x</label>").addClass("label label-danger");
					labelRemove.attr("data-mypath", path);
					labelRemove.click(removeImage);
					labelRemove.css("cursor", "pointer");
					td.append(labelRemove);
					td.append("&nbsp;&nbsp;");
				}
				
				td.append($("<label>#" + index + " / " + imageItems.length + "</label>").addClass("label label-primary"));
				td.append("&nbsp;&nbsp;");
				
				var sizeStyle = isSmallFile ? "success" : "danger";
				td.append($("<label>" + item.size + "</label>").addClass("label label-" + sizeStyle));
				td.append("&nbsp;&nbsp;");
				
				if(ftype == "image") {
					var labelArea = $("<label>?宽高</label>").addClass("label label-default");
					labelArea.click(getImageArea);
					labelArea.css("cursor", "pointer");
					td.append(labelArea);
					td.append("&nbsp;&nbsp;");
				}
				
				var a3 = anchorOf(imageName, path);
				td.append(a3);
				td.append("<br>").append(anchor);
				var tr = $("<tr></tr>").append(td);
				$("#list").append(tr);

				//donation area
				var kdonation = [[${kdonation}]];
				if(!kdonation) {
					kdonation = 20;
				}
				var base = imageItems.length % kdonation;
				var offset = index % kdonation;
//				console.log(base, offset, index);
				if(base == offset) {
					var boxMoney = $("<input></input>").attr("type", "checkbox");
					boxMoney.css("vertical-align", "middle");
					boxMoney.addClass("cold");
					boxMoney.click(function() {
						var div = $(this).parent().find(".warm");
						if ($(this).prop("checked")) {
							div.show();
						} else {
							div.hide();
						}
					});

					var infoMoney = $("<input></input>").attr("type", "button").val("光明正大打赏，心安理得笑纳").addClass("btn btn-warning");
					infoMoney.click(function() {
						$(this).parent().find(".cold").click();
					});

					var image = $("<img></img>").attr("alt", "<打赏二维码，点击加载>");
					image.attr("src", "/storage/donation.weixin.foxi.png");
					image.css("max-width", "100%");
					
					var divBrImage = $("<div></div>");
					divBrImage.addClass("warm");
					divBrImage.append(image);
					divBrImage.hide();
					
					var td = $("<td></td>");
					
					td.append(boxMoney).append("&nbsp;").append(infoMoney);
					td.append(divBrImage);
					var tr = $("<tr></tr>").append(td);
					$("#list").append(tr);
				}
				//donation area
			}
		}
		
		function loadImage(obj, url, callback) {
            var img = new Image();
            img.src = url;

            // 判断图片是否在缓存中
            if(img.complete){
                callback.call(img, obj);
                return;
            }

            // 图片加载到浏览器的缓存中回调函数
            img.onload = function(){
                callback.call(img, obj);
            }
        }
		
		function showImage(obj){
            obj.src = this.src;
            $(obj).parent().attr("href", obj.src);
        }
		
		function loadVideo(obj, url, callback) {
            var img = new Video();
            img.src = url;

            // 判断图片是否在缓存中
            if(img.complete){
                callback.call(img, obj);
                return;
            }

            // 图片加载到浏览器的缓存中回调函数
            img.onload = function(){
                callback.call(img, obj);
            }
        }
		
		function showVideo(obj){
            obj.src = this.src;
            $(obj).parent().attr("href", obj.src);
        }
		
		function backto() {
			var url = "/albumlaw/list";
			window.location.href = url;
		}
		
		function removeImage() {
			var labelRemove = $(this);

			var imageHref = labelRemove.data("mypath");
//			alert(imageHref);
			var webData = {imageHref : imageHref};
			console.log(imageHref);
			var theball = {
				url : "/album/removeImage",
				type : "POST",
				dataType : "json",
				data : webData,
				success: function(meat) {
					console.log("good", meat);
		        }
			}
			$.ajax(theball);
			labelRemove.parent().hide();
		}
		
		function getImageArea() {
			var labelArea = $(this);
			var flagArea = labelArea.data("asked");
			if(flagArea) {
				return;
			}
			labelArea.attr("data-asked", true);
			labelArea.css("cursor", "default");
			var whenasking = "label-info";
			labelArea.addClass(whenasking);

			var imageHref = labelArea.parent().find("img").data("mypath");
			var webData = {imageHref : imageHref};
			console.log(imageHref);
			var theball = {
				url : "/album/areaOfImage",
				dataType : "json",
				data : webData,
				success: function(meat) {
//					labelArea.removeClass(whenasking);
					var area = meat.info;
					if(area) {
//						labelArea.addClass("label-success");
						labelArea.text(area);
					} else {
						labelArea.addClass("label-danger");
						labelArea.text("无效");
						labelArea.parent().find("br").remove();
						labelArea.parent().find("a").remove();
					}
		        }
			}
			$.ajax(theball);
		}
	</script>
	<style type="text/css">
	pre {
		white-space: pre-wrap;
		word-wrap: break-word;
	}
	.underline {
		text-decoration:underline
	}
	video {
	    height: auto;
	    width: 100%;
	    display: block;
	}
	</style>
</head>

<body>
	<div th:replace="header::bodyHead"></div>
		<div class="margin10">
		<div id="alert"></div>
		<div>
		<h2 id="top">查看<span onclick="backto();">相</span>册
		<input id="backto" class="btn btn-primary btn-sm" type="button" onclick="backto();" value="相册列表" />
		<input class="btn btn-primary btn-sm" type="button" onclick="refresh();" value="刷新" />
		</h2>
		<span></span>
		</div>
		
	    <table id="major" class="table table-hover">
	    	<thead>
	    		<tr>
	    			<td id="tdName">
	    				 <input id="myUpload" class="btn btn-success btn-sm" type="button" value="+相片" />
	    				 <input id="myRemove" class="btn btn-danger btn-sm hide" type="button" value="x相册" />
	    			</td>
	    		</tr>
	    		<tr id="trAll">
	    			<td>
	    			<label id="countOfAll">0张</label>&nbsp;<label id="sizeOfAll">0KB</label>
	    			<label id="infoBigSmall" />
	    			</td>
	    		</tr>
	    		<tr id="trBigSmall">
	    			<td>
	    			<label id="countOfSmall">0张</label>&nbsp;<label id="sizeOfSmall">0KB</label>
	    			<label id="countOfBig">0张</label>&nbsp;<label id="sizeOfBig">0KB</label>
	    			</td>
	    		</tr>
	    		<tr id="trLoadBig">
	    			<td>
	    			<input id="btnLoadBig" class="btn btn-sm" type="button" value="加载所有大图" />
	    			</td>
	    		</tr>
	    	</thead>
	        <tbody id="list">
	        </tbody>
	        <tr>
				  <td id="showArea">
				  	<a href="#top">回到顶部</a>
				  </td>
				</tr>
	    </table>
	    </div>
	<div th:replace="footer::copyright"></div>
</body>
</html>